<!-- 我的地图 -->

<template>
  <div class="full" id="MaintainAlarm-AlarmGaode-map" />
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import UTIL from '@admin/views/Maintain/Alarm/UTIL'

const { AMap } = window

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyMap',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 是否全部就绪
     */
    readyAll() {
      return this.MAP.readyMap && this.readyList
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听列表就绪
     */
    readyAll(ready) {
      ready && this.addToMap()
    },
  },

  /**
   * 挂载完成 (先抽取再调用)
   */
  mounted() {
    this.init()
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 初始化
     */
    async init() {
      const { MAP } = this
      const CONFIG = await CORE.loadJSON(CORE.asset('AMAP_CONFIG.json'))
      CORE.merge(MAP, CONFIG)

      AMap.plugin('AMap.MoveAnimation', () => {
        MAP.map = new AMap.Map('MaintainAlarm-AlarmGaode-map', { ...MAP.MAP })
        MAP.readyMap = true
      })
    },

    /**
     * 添加到地图
     */
    addToMap() {
      const { map } = this.MAP
      const list = this.list.filter((item) => item.lon && item.lat)

      // 清空
      map.clearMap()

      // 文本标记点
      list.forEach((item) => {
        if (!item.lon || !item.lat) return

        const level = item.alarmLevelId
        const content = `<div class="AlarmGaode-level${level}"><img src="${UTIL.getImg(level)}" /></div>`
        const position = new AMap.LngLat(item.lon, item.lat)

        const marker = new AMap.Text({ map, position, content, anchor: 'bottom-center' })
        marker.on('click', () => this.openModal(item))
      })

      // 自适应缩放显示
      map.setFitView(null, null, [80, 0, 0, 0])
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
